<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <my-hello></my-hello>

    </div>

    <template id="hello">
        <div>
            <h3>我是hello父组件</h3>
            <h3>访问自己的数据：{{msg}}</h3>
            <h3>访问子组件的数据：{{sex}}</h3>
            <hr>

            <my-world :message="msg" @e-world="getData"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子组件</h4>
            <h4>访问自己的数据：{{sex}}</h4>
            <h4>访问父组件的数据：{{message}}</h4>
        </div>
    </template>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: []
        },
        created(){
            // 发送Ajax请求
            axios.get('http://localhost:8080/myweb/list')
                .then(res => {
                    console.log(res.data)
                    this.userList = res.data.data
                })
                .catch(err => {
                    console.log(err)
                })
        },
        components: { // 父组件
            'my-hello': {
                template: '#hello',
                data(){
                    return {
                        msg: 'welcome',
                        sex: null
                    }
                },
                methods: {
                    getData(sex){
                        this.sex = sex
                    }
                },
                components:{ // 子组件
                    'my-world': {
                        template: '#world',
                        data(){
                            return {
                                sex: "male"
                            }
                        },
                        props: {
                            message: String
                        },
                        created(){
                            // 触发事件，向父组件发送数据
                            this.$emit('e-world', this.sex)
                        }
                    }
                }
            }
        }
    })
</script>